<template>
	<view class="app-nav dir-left-nowrap cross-center main-around">
		<view class="box-grow-1" v-for="(item, index) in list" :key="index" @click="active(item.id)">
			<text :class="{'app-active-item': activeIndex === item.id}">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
    export default {
        name: 'app-nav',
	    data() {
            return {
                list: [
	                {
	                    name: '全部',
		                id: 0,
	                },
                    {
                        name: '待付款',
                        id: 1,
                    },
                    {
                        name: '拼团中',
                        id: 2,
                    },
                    {
                        name: '拼团成功',
                        id: 3,
                    },
                    {
                        name: '拼团失败',
                        id: 4,
                    },
                ],
	            activeIndex: 0
            }
	    },
	    methods: {
            active(id) {
                this.activeIndex = id;
                this.$emit('click', id);
            }
	    }
    }
</script>

<style scoped lang="scss">
	.app-nav {
		width: #{750rpx};
		height: #{80rpx};
		font-size: #{26rpx};
		color: #666666;
		border-bottom: #{1rpx} solid #e2e2e2;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: white;
		>view {
			text-align: center;
		}
		text {
			display: inline-block;
			height: #{80rpx};
			line-height: #{76rpx};
			border-bottom-width: #{4rpx};
			border-bottom-style: solid;
			border-bottom-color: transparent;
		}
		.app-active-item {
			color: #ff5c5c;
			border-color: #ff5c5c;
		}
	}
</style>